
// 命令是  npx sass index.scss index.css -w
.box {
    width: 900px;
    height: 900px;
    margin: 20px auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 10px;
    transition: 0.5s;

    @for $i from 0 to 9 {
        .item:nth-child(#{$i + 1}) {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            font-size: 90px;
            font-weight: 900;
            background-color: hsl(random(360), 80%, 50%);
        }
    }

    @for $i from 0 to 9 {
        &:has(.item:nth-child(#{$i + 1}):hover) {
            // 横 行
            $r: floor($i / 3)+1;
            // @debug $r;
            // 竖 列
            $c: $i % 3+1;
            // @debug $c;

            $arr: 1fr 1fr 1fr;
            $rows: set-nth($arr, $r, 2fr);
            $cols: set-nth($arr, $c, 2fr);

            grid-template-rows: $rows;
            grid-template-columns: $cols;
        }

    }
}